<div class="modal-header">
  <div class="modal-title">{{ record.ID > 0 ? '编辑主机' : '新建主机' }}</div>
</div>
<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
<div *ngIf="i">
  <form nz-form [formGroup]="validateForm">
    <input nz-input hidden formControlName="ID" />
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired nzFor="host_ip">主机IP</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="请填写主机IP！">
            <input nz-input formControlName="host_ip" placeholder="主机IP" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired nzFor="host_port">主机端口</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="请填写主机端口！">
            <input nz-input formControlName="host_port" placeholder="主机端口" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired nzFor="host_username">主机登录名</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="请填写主机登录名！">
            <input nz-input formControlName="host_username" placeholder="主机登录名" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="host_password">主机密码</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="主机密码">
            <nz-input-group [nzSuffix]="suffixTemplate1">
              <input formControlName="host_password" [type]="hostPasswordVisible ? 'text' : 'password'" nz-input placeholder="主机密码" />
            </nz-input-group>
            <ng-template #suffixTemplate1>
              <i
                nz-icon
                [nzType]="hostPasswordVisible ? 'eye-invisible' : 'eye'"
                (click)="hostPasswordVisible = !hostPasswordVisible"
                style="cursor: pointer"
              ></i>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired nzFor="account_username">店铺账户名</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="请填写店铺账户名！">
            <input nz-input formControlName="account_username" (input)="getAccountPassword($event)" placeholder="店铺账户名" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="account_origin_pwd">店铺登录密码</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="店铺登录密码！">
            <nz-input-group [nzSuffix]="suffixTemplate2">
              <input
                formControlName="account_origin_pwd"
                [type]="accountOriginPwdVisible ? 'text' : 'password'"
                nz-input
                placeholder="店铺登录密码"
                (input)="getAccountHashPwd($event)"
              />
            </nz-input-group>
            <ng-template #suffixTemplate2>
              <i
                nz-icon
                [nzType]="accountOriginPwdVisible ? 'eye-invisible' : 'eye'"
                (click)="accountOriginPwdVisible = !accountOriginPwdVisible"
                style="cursor: pointer"
              ></i>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="account_password">店铺加密密码</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="请填写店铺加密密码！">
            <nz-input-group [nzSuffix]="suffixTemplate3">
              <input
                formControlName="account_password"
                [type]="accountPasswordVisible ? 'text' : 'password'"
                nz-input
                placeholder="店铺加密密码"
              />
            </nz-input-group>
            <ng-template #suffixTemplate3>
              <i
                nz-icon
                [nzType]="accountPasswordVisible ? 'eye-invisible' : 'eye'"
                (click)="accountPasswordVisible = !accountPasswordVisible"
                style="cursor: pointer"
              ></i>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="host_state">主机状态</nz-form-label>
          <nz-form-control [nzSpan]="16" nzErrorTip="主机状态">
            <nz-radio-group formControlName="host_state">
              <label nz-radio [nzValue]="0">未运行</label>
              <label nz-radio [nzValue]="1">运行中</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="status">部署状态</nz-form-label>
          <nz-form-control [nzSpan]="16" nzErrorTip="部署状态">
            <nz-radio-group formControlName="release_status">
              <label nz-radio [nzValue]="0">未部署</label>
              <label nz-radio [nzValue]="1">已部署</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8">部署日期</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-date-picker
              (ngModelChange)="datePickerChange($event)"
              formControlName="release_date"
              nzPlaceHolder="请选择部署日期"
            ></nz-date-picker>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="status">状态</nz-form-label>
          <nz-form-control [nzSpan]="16" nzErrorTip="请选择状态">
            <nz-radio-group formControlName="status">
              <label nz-radio [nzValue]="0">禁用</label>
              <label nz-radio [nzValue]="1">启用</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired="false" nzFor="issues">备注描述</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="请填写备注描述！">
            <textarea nz-input formControlName="issues" [rows]="2" placeholder="备注描述" name="issues"></textarea>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
  <button
    nz-button
    type="submit"
    nzType="primary"
    (click)="save(validateForm.value)"
    [disabled]="!validateForm.valid"
    [nzLoading]="http.loading"
    >保存
  </button>
</div>
